<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-tabs v-model="activeName">
            <el-tab-pane label="粉丝列表" name="first">
                <div 
                class="active" 
                v-for="(item,index) in imgList"
                :key="index">
                    <el-avatar :size="100" :src="item.photo"></el-avatar>
                    <div class="activeName">{{item.name}}</div>
                </div>
                <div class="pagination">
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="currentChange"
                    :page-size="this.page_size"
                    :current-page="this.page"
                    :total="total_count">
                </el-pagination>
                </div>
                
                
            </el-tab-pane>
            <el-tab-pane label="粉丝画像" name="second">


                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width: 600px;height:400px;"></div>




            </el-tab-pane>
            
        </el-tabs>
    </div>
</template>
<script>
import {api_followers,api_statistics} from '@/api/fans'
import echarts from 'echarts'
export default {
    data(){
        return{
            activeName:'first',
            circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            total_count:20,
            page_size:20,
            page:1,
            imgList:[],
            dataX:[],
            dataY:[]

        }
    },
    methods:{
        getFollowers(){
            api_followers({
                page:this.page,
                per_page:this.page_size
            }).then(res=>{
                this.total_count = res.data.data.total_count
                this.imgList = res.data.data.results
                
                console.log(res)
            })
        },
        currentChange(val){
            this.page = val
            this.getFollowers();
        },
        initEcharts(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '粉丝年龄数量统计图'
                },
                tooltip: {},
                legend: {
                    data:['粉丝数量']
                },
                xAxis: {
                    data: this.dataX
                },
                yAxis: {},
                series: [{
                    name: '粉丝数量',
                    type: 'bar',
                    data: this.dataY
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        getStatistics(){
            api_statistics().then(res=>{
                console.log(res)
                let age = res.data.data.age
                this.dataX = Object.keys(age)
                this.dataY = Object.values(age)
                this.dataX = this.dataX.map(item=>{
                    return item.replace('le','小于').replace('gt','大于')
                })
                this.initEcharts()
            })
        }
    },
    mounted(){
        this.getFollowers()
        this.getStatistics()
    }
}
</script>
<style scoped>
.active{
    float: left;
    margin-right: 50px;
    border: 1px solid #ccc;
    padding: 20px;
}
.activeName{
    width: 100%;
    text-align: center;
    
}
.pagination{
    clear: both;
    margin-top: 20px;
}
</style>